<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
/*设置表格的样式*/
    table{
/*设置表格的为绝对布局，且设置为居中对齐*/
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  </style>
</head>
<body>
<!--建立一个表格-->
<table border="">
  <tr>
    <td>全选<input type="checkbox" onclick="selectAll(this.checked)"></td>
    <td>名称</td>
    <td>单价</td>
    <td>个数</td>
    <td>总价</td>
    <td>操作</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>草莓</td>
    <td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">19.9</td>
    <td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">3</td>
    <td class="sum">19.9</td>
    <td>
      <button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
      <button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
      <button onclick="delRow(this.parentElement.parentElement)">删除</button>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>西瓜</td>
    <td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">19.9</td>
    <td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">3</td>
    <td class="sum">19.9</td>
    <td>
      <button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
      <button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
      <button onclick="delRow(this.parentElement.parentElement)">删除</button>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>菠萝</td>
    <td contenteditable="true" class="price" onblur="calcRow('',this.parentElement)">19.9</td>
    <td contenteditable="true" class="count" onblur="calcRow('',this.parentElement)">3</td>
    <td class="sum">19.9</td>
    <td>
      <button onclick="calcRow('+',this.parentElement.parentElement)">+</button>
      <button onclick="calcRow('-',this.parentElement.parentElement)">-</button>
      <button onclick="delRow(this.parentElement.parentElement)">删除</button>
    </td>
  </tr>
  <tr>
    <td colspan="5"><h1>总价: $<font color="green" id="allPrice">0.0</font></h1></td>
    <td><button onclick="delCKRow()">删除所选的商品</button></td>
  </tr>
</table>

<script>

  //计算当前所有商品的总价
  function calcAll() {
    //获得页面中所有的行
    var rs=document.getElementsByTagName("tr")
    var sum=0;
    for(let i=1;i<rs.length-1;i++){
      //rs[i]就是除了第一行之外的其他的行
      var s1= textContent = rs[i].getElementsByClassName("sum")[0].textContent
      sum+=parseFloat(s1)
    }
    //给页面赋值,只要小数点后两位
    allPrice.textContent=sum.toFixed(2)
  }

  //删除选中的行
  function delCKRow() {
    //获得页面中所有的行
    var rs=document.getElementsByTagName("tr")
    //将集合collection变成数组array
    rs=Array.from(rs)
    for(let i=1;i<rs.length-1;i++){
      //拿到行中对应的多选框
      var ck=rs[i].querySelectorAll("input[type='checkbox']")[0]
      //判断多选框是否被选中
      if(ck.checked){
        //删除该行
        rs[i].outerHTML=""
      }
    }
    calcAll()
  }

  //全选功能
  function selectAll(status) {
    var is=document.querySelectorAll("input[type='checkbox']")
    for (let i of is){
      i.checked=status
    }
  }

  //按钮点击删除该行
  function delRow(tr) {
    tr.outerHTML=""
    calcAll()
  }

  //页面数值变化重新计算价格
  function calcRow(rex,tr) {
    //rex是运算符号
    //tr是当前对应的行
    var td=tr.getElementsByClassName("count")[0]
    if (td.textContent>0){
      if(rex==="-"){
        td.textContent-=1
      }
    }
    if (td.textContent>-1){
      if(rex==="+"){
        td.textContent=td.textContent*1+1
      }
    }
    calc(tr)
  }

  //写一个函数：算出当前一行中的价格并完成赋值
  function calc(tr) {
    //value只有在input或者select
    //其他的内容全部使用textContent,innerHTML
    var price=tr.getElementsByClassName("price")[0].textContent
    var count=tr.getElementsByClassName("count")[0].textContent
    if(isNaN(price*1)){
      tr.getElementsByClassName("price")[0].textContent=0
      price=0
    }
    if(isNaN(count*1)){
      tr.getElementsByClassName("count")[0].textContent=0
      count=0
    }
    //使用单价*数量算出总价 并赋值给对应元素
    tr.getElementsByClassName("sum")[0].textContent=(price*count).toFixed(2)
    calcAll()
  }

  //窗口的加载事件  会在整个页面加载完成之后执行
  window.onload=()=>{
    //获得页面中所有的行
    var rs=document.getElementsByTagName("tr")
    for(let i=1;i<rs.length-1;i++){
      calc(rs[i])
    }
  }

</script>
</body>
</html>
